<template>
	<view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent"
		:style="{backgroundColor: backgroundColor}"
	>
		<view 
			class="mask-content"
			@click.stop.prevent="stopPrevent"
			:style="[{
				height: config.height, 
				transform: transform
			}]"
		>
			<view class="share-header">
				推荐收藏的人才
				<picker class="picker-btn" @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1?picker[index]:'专业﹀'}}
					</view>
				</picker>
			</view>
			<scroll-view  class="view-content" scroll-y :upper-threshold="10" :lower-threshold="10">
				<z-table showSelect :tableData='tableList' :columns='selectColumns' @onSelect='tableSelect'></z-table>
			</scroll-view>
			<view class="bottom b-t" >
				<button class=" round re-btn" @click="toggleMask">推荐</button></view>
		</view>
	</view>
</template>

<script>
	import zTable from '@/components/z-table/z-table.vue';
	export default {
		
		data() {
			return {
				transform: 'translateY(50vh)',
				timer: 0,
				allChecked:false,
				index:-1,
				backgroundColor: 'rgba(0,0,0,0)',
				show: false,
				config: {},
				picker: [ '所有','法学类', '计算机类', '金融类'],
				tableList: [{
						id: 0,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 1,
						name: '重庆时尚',
						major: '时尚总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 2,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 3,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 4,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 5,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 6,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 7,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 8,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 9,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 10,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					},
					{
						id: 11,
						name: '重庆医美事业',
						major: '人力资源总监',
						workAdd:'12k~15k/月',
					}
				],
				selectColumns: [{
						title: "公司简称",
						key: 'name',
						width: 250
					},
					{
						title: "招聘职位",
						key: "major",
						width: 300
					},
					{
						title: "工资范围",
						key: "workAdd",
						width: 200
					},
				],
			};
		},
		props:{
			contentHeight:{
				type: Number,
				default: 0
			},
			//是否是tabbar页面
			hasTabbar:{
				type: Boolean,
				default: false
			},
			positionList:{
				type: Array,
				default: function(){
					return [];
				}
			}
		},
		created() {
			const height = uni.upx2px(this.contentHeight) + 'px';
			this.config = {
				height: height,
				transform: `translateY(${height})`,
				backgroundColor: 'rgba(0,0,0,.4)',
			}
			this.transform = this.config.transform;
		},
		methods:{
			toggleMask(){
				//防止高频点击
				if(this.timer == 1){
					return;
				}
				this.timer = 1;
				setTimeout(()=>{
					this.timer = 0;
				}, 500)
				
				if(this.show){
					this.transform = this.config.transform;
					this.backgroundColor = 'rgba(0,0,0,0)';
					setTimeout(()=>{
						this.show = false;
						this.hasTabbar && uni.showTabBar();
					}, 200)
					return;
				}
				
				this.show = true;
				//等待mask重绘完成执行
				if(this.hasTabbar){
					uni.hideTabBar({
						success: () => {
							setTimeout(()=>{
								this.backgroundColor = this.config.backgroundColor;
								this.transform = 'translateY(0px)';
							}, 10)
						}
					});
				}else{
					setTimeout(()=>{
						this.backgroundColor = this.config.backgroundColor;
						this.transform = 'translateY(0px)';
					}, 10)
				}
			},
			//防止冒泡和滚动穿透
			stopPrevent(){},
			//分享操作
			shareToFriend(type){
				this.$api.msg(`分享给${type}`);
				this.toggleMask();
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			tableSelect(selectList) {
				uni.showToast({
					title: `选中了TableData中下标为${selectList.join(',')}的元素`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang='scss'>
	.mask{
		position:fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display:flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 999;
		transition: .3s;
		.bottom{
			position:absolute;
			left: 0;
			bottom: 0;
			display:flex;
			justify-content: center;
			align-items: center;
			border-radius: 10px;
			width: 100%;
			height: 80upx;
			background: #FFF;
			z-index: 9;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
		}
		.re-btn{
			height: 75upx;
			width: 80%;
			color: #FFF;
			background:#4CA5FE;
		}
	}
	.picker-btn{
		right: 10px;
		top:10px;
		position: fixed;
	}
	
	.mask-content{
		height: 700upx !important;
		width: 100%;
		margin: 0;
		margin-bottom: 60px;
		transition: .3s;
		background: #fff;
		border-radius:10px;
		&.has-bottom{
			padding-bottom: 90upx;
		}
		.view-content{
			height: 250px;
		}
	}
	.share-header{
		height: 80upx;
		font-size: 32upx;
		color: font-color-dark;
		display:flex;
		align-items:center;
		justify-content: center;
		background: #4CA5FE;
		border-radius: 10px 10px 0 0;
		color: #FFF;
		
	}
	.share-list{
		display:flex;
		height: 100%;
		/* flex-wrap: wrap; */
		overflow: hidden;
	}
	.share-item{
		min-width: 33.33%;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180upx;
		image{
			width: 80upx;
			height: 80upx;
			margin-bottom: 16upx;
		}
		text{
			font-size: $font-base;
			color: $font-color-base;
		}
	}
</style>
